﻿@page "/forms/check"
<Pager Title="Chckes & Radios" Description="Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component."
Indicates="@(new[]{"Checks","Disabled checkbox","Radios","Disabled radio","Switches","Inline","Checkbox toggle buttons","Radio toggle buttons","Outlined styles"})">
	<Demo Title="Checks">
		<Description>
			Only <code>bool</code> type suppert for data binding.
		</Description>
		<Run>
			<Form Model="this">
				<FormInputCheckbox @bind-Value="Checked" DisplayName="Default checkbox"/>
				<FormInputCheckbox @bind-Value="HasChecked" DisplayName="Checked checkbox"/>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputCheckbox bind-Value=""Checked"" DisplayName=""Default checkbox""/>
<FormInputCheckbox bind-Value=""HasChecked"" DisplayName=""Checked checkbox""/>
```
```cs
bool Checked{ get; set; }
bool HasChecked { get; set; } = true;
```
			")
		</Code>
	</Demo>
	<Demo Title="Disabled checkbox">
		<Description>

		</Description>
		<Run>
			<Form Model="this">
				<FormInputCheckbox @bind-Value="DisabledChecked" DisplayName="Disabled default checkbox" Disabled/>
				<FormInputCheckbox @bind-Value="DisabledHasChecked" DisplayName="Disabled checked checkbox" Disabled/>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputCheckbox Disabled bind-Value=""DisabledChecked"" DisplayName=""Disabled default checkbox""/>
<FormInputCheckbox Disabled bind-Value=""DisabledHasChecked"" DisplayName=""Disabled checked checkbox""/>
```
			")
		</Code>
	</Demo>
	<Demo Title="Radios">
		<Description>
			Groups child <code>FormInputRadio</code> in <code>FormInputRadioGroup</code> component.
		</Description>
		<Run>
			<Form Model="this">
				<FormInputRadioGroup @bind-Value="Fruit" DisplayName="Selected Fruit">
					<FormInputRadio Text="Apple"  Value="@("Apple")"/>
					<FormInputRadio Text="Banana"  Value="@("Banana")"/>
					<FormInputRadio Text="Grape"  Value="@("Grape")"/>
				</FormInputRadioGroup>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputRadioGroup bind-Value=""Fruit"" DisplayName=""Selected Fruit"">
	<FormInputRadio Text=""Apple""  Value=""@(""Apple"")""/>
	<FormInputRadio Text=""Banana""  Value=""@(""Banana"")""/>
	<FormInputRadio Text=""Grape""  Value=""@(""Grape"")""/>
</FormInputRadioGroup>
```
			")
		</Code>
	</Demo>
	<Demo Title="Disabled radio">
		<Description>
			Set <code>Disabled</code> for <code>FormInputRadioGroup</code> component to automatically styled to match with a lighter color to help indicate the input’s state.
		</Description>
		<Run>
			<Form Model="this">
				<FormInputRadioGroup @bind-Value="DisabledFruit" DisplayName="Selected Fruit" Disabled>
					<FormInputRadio Text="Apple"  Value="@("Apple")"/>
					<FormInputRadio Text="Banana"  Value="@("Banana")"/>
					<FormInputRadio Text="Grape"  Value="@("Grape")"/>
				</FormInputRadioGroup>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputRadioGroup bind-Value=""DisabledFruit"" DisplayName=""Selected Fruit"" Disabled>
	<FormInputRadio Text=""Apple""  Value=""@(""Apple"")""/>
	<FormInputRadio Text=""Banana""  Value=""@(""Banana"")""/>
	<FormInputRadio Text=""Grape""  Value=""@(""Grape"")""/>
</FormInputRadioGroup>
```
			")
		</Code>
	</Demo>
		<Demo Title="Switches">
		<Description>
			A switch has the markup of a <code>FormInputCheckbox</code> but sets the <code>Switch</code> parameter to render a toggle switch. 
			Switches also support the disabled attribute.
		</Description>
		<Run>
			
			<Form Model="this">
				<FormInputCheckbox Switch @bind-Value="SwitchDefault" DisplayName="Switch default checkbox"/>
				<FormInputCheckbox Switch @bind-Value="SwitchChecked" DisplayName="Switch checked checkbox"/>
				<FormInputCheckbox Switch Disabled @bind-Value="DisabledSwitchDefault" DisplayName="Disabled wwitch default checkbox"/>
				<FormInputCheckbox Switch Disabled @bind-Value="DisabledSwitchChecked" DisplayName="Disabled switch checked checkbox"/>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputCheckbox Switch bind-Value=""SwitchDefault"" DisplayName=""Switch default checkbox""/>
<FormInputCheckbox Switch bind-Value=""SwitchChecked"" DisplayName=""Switch checked checkbox""/>
<FormInputCheckbox Switch Disabled bind-Value=""DisabledSwitchDefault"" DisplayName=""Disabled wwitch default checkbox""/>
<FormInputCheckbox Switch Disabled bind-Value=""DisabledSwitchChecked"" DisplayName=""Disabled switch checked checkbox""/>
```
			")
		</Code>
	</Demo>
		<Demo Title="Inline">
		<Description>
			Group checkboxes or radios on the same horizontal row by adding <code>Inline</code> parameter
		</Description>
		<Run>			
			<Form Model="this">
				<FormInputCheckbox Inline @bind-Value="Checked" DisplayName="Default checkbox"/>
				<FormInputCheckbox Inline @bind-Value="HasChecked" DisplayName="Checked checkbox"/>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputCheckbox Inline bind-Value=""Checked"" DisplayName=""Default checkbox""/>
<FormInputCheckbox Inline bind-Value=""HasChecked"" DisplayName=""Checked checkbox""/>
```
			")
		</Code>
	</Demo>
		<Demo Title="">
		<Description>

		</Description>
		<Run>
			<FormInputRadioGroup Inline @bind-Value="Fruit">
				<FormInputRadio Text="Apple" Value="@("Apple")" />
				<FormInputRadio Text="Banana" Value="@("Banana")" />
				<FormInputRadio Text="Grape" Value="@("Grape")" />
			</FormInputRadioGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputRadioGroup Inline bind-Value=""Fruit"">
	<FormInputRadio Text=""Apple"" Value=""@(""Apple"")"" />
	<FormInputRadio Text=""Banana"" Value=""@(""Banana"")"" />
	<FormInputRadio Text=""Grape"" Value=""@(""Grape"")"" />
</FormInputRadioGroup>
```
			")
		</Code>
	</Demo>
		<Demo Title="Checkbox toggle buttons">
		<Description>
			Use <code>FormInputCheckboxButton</code> component for checkbox toggle button.
		</Description>
		<Run>
			<Form Model="this">
				<FormInputCheckboxButton @bind-Value="ToggleCheck" DisplayName="Signle Button"/>
				<FormInputCheckboxButton @bind-Value="ToggleChecked" DisplayName="Checked"/>
				<FormInputCheckboxButton Disabled @bind-Value="DisabledToggleCheck" DisplayName="Disabled"/>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputCheckboxButton bind-Value=""ToggleCheck"" DisplayName=""Signle Button""/>
<FormInputCheckboxButton bind-Value=""ToggleChecked"" DisplayName=""Checked""/>
<FormInputCheckboxButton Disabled bind-Value=""DisabledToggleCheck"" DisplayName=""Disabled""/>
```
			")
		</Code>
	</Demo>
		<Demo Title="Radio toggle buttons">
		<Description>
			Use <code>FormInputRadioButton</code> component for radio toggle button in <code>FormInputRadioGroup</code> component.
		</Description>
		<Run>
			<Form Model="this">
			<FormInputRadioGroup @bind-Value="RadioButton">
				<FormInputRadioButton Text="Checked" Value="@("Checked")"/>
				<FormInputRadioButton Text="Radio" Value="@("Radio")"/>
				<FormInputRadioButton Text="Disabled" Value="@("Disabled")" Disabled/>
			</FormInputRadioGroup>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputRadioGroup bind-Value=""RadioButton"">
	<FormInputRadioButton Text=""Checked"" Value=""@(""Checked"")""/>
	<FormInputRadioButton Text=""Radio"" Value=""@(""Radio"")""/>
	<FormInputRadioButton Text=""Disabled"" Value=""@(""Disabled"")"" Disabled/>
</FormInputRadioGroup>
```
			")
		</Code>
	</Demo>
		<Demo Title="Outlined styles">
		<Description>
			Set <code>Outline</code> for outline styles with different <code>Color</code>.
		</Description>
		<Run>
				<FormInputCheckboxButton Outline @bind-Value="ToggleCheck1" DisplayName="Signle Button"/>
				<FormInputCheckboxButton Outline Color="Color.Info" @bind-Value="ToggleChecked1" DisplayName="Checked"/>
				
			<FormInputRadioGroup @bind-Value="OutlineRadioButton">
				<FormInputRadioButton Outline Color="Color.Success" Text="Success" Value="@("Success")"/>
				<FormInputRadioButton Outline Color="Color.Warning" Text="Warning" Value="@("Warning")"/>
				<FormInputRadioButton Outline Color="Color.Danger" Text="Danger" Value="@("Danger")"/>
			</FormInputRadioGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputCheckboxButton Outline bind-Value=""ToggleCheck"" DisplayName=""Signle Button""/>
<FormInputCheckboxButton Outline Color=""Color.Info"" bind-Value=""ToggleChecked"" DisplayName=""Checked""/>
				
<FormInputRadioGroup bind-Value=""OutlineRadioButton"">
	<FormInputRadioButton Outline Color=""Color.Success"" Text=""Success"" Value=""@(""Success"")""/>
	<FormInputRadioButton Outline Color=""Color.Warning"" Text=""Warning"" Value=""@(""Warning"")""/>
	<FormInputRadioButton Outline Color=""Color.Danger"" Text=""Danger"" Value=""@(""Danger"")""/>
</FormInputRadioGroup>
```
			")
		</Code>
	</Demo>
</Pager>
@code{
	bool Checked{ get; set; }
	bool HasChecked { get; set; } = true;


	bool DisabledChecked{ get; set; }
	bool DisabledHasChecked { get; set; } = true;

	string Fruit{ get; set; }

	string DisabledFruit { get; set; } = "Banana";

	bool SwitchDefault { get;  set; }
	bool SwitchChecked { get; set; } = true;
	bool DisabledSwitchDefault { get;  set; }
	bool DisabledSwitchChecked { get; set; } = true;


	bool ToggleCheck{ get; set; }
	bool ToggleChecked { get; set; } = true;
	bool DisabledToggleCheck{ get; set; }

	string RadioButton { get; set; } = "Checked";

	string OutlineRadioButton { get; set; } = "Success";
	bool ToggleCheck1{ get; set; }
	bool ToggleChecked1 { get; set; } = true;
}